
/* ==================
          步骤条
 ==================== */

.cu-steps {
    display: flex;
}

scroll-view.cu-steps {
    display: block;
    white-space: nowrap;
}

scroll-view.cu-steps .cu-item {
    display: inline-block;
}

.cu-steps .cu-item {
    flex: 1;
    text-align: center;
    position: relative;
    min-width: 100*1upx;
}

.cu-steps .cu-item:not([class*="text-"]) {
    color: #8799a3;
}

.cu-steps .cu-item [class*="cuIcon-"],
.cu-steps .cu-item .num {
    display: block;
    font-size: 40*1upx;
    line-height: 80*1upx;
}

.cu-steps .cu-item::before,
.cu-steps .cu-item::after,
.cu-steps.steps-arrow .cu-item::before,
.cu-steps.steps-arrow .cu-item::after {
    content: "";
    display: block;
    position: absolute;
    height: 0px;
    width: calc(100% - 80upx);
    border-bottom: 1px solid #ccc;
    left: calc(0px - (100% - 80upx) / 2);
    top: 40*1upx;
    z-index: 0;
}

.cu-steps.steps-arrow .cu-item::before,
.cu-steps.steps-arrow .cu-item::after {
    content: "\e6a3";
    font-family: 'cuIcon';
    height: 30*1upx;
    border-bottom-width: 0px;
    line-height: 30*1upx;
    top: 0;
    bottom: 0;
    margin: auto;
    color: #ccc;
}

.cu-steps.steps-bottom .cu-item::before,
.cu-steps.steps-bottom .cu-item::after {
    bottom: 40*1upx;
    top: initial;
}

.cu-steps .cu-item::after {
    border-bottom: 1px solid currentColor;
    width: 0px;
    transition: all 0.3s ease-in-out 0s;
}

.cu-steps .cu-item[class*="text-"]::after {
    width: calc(100% - 80upx);
    color: currentColor;
}

.cu-steps .cu-item:first-child::before,
.cu-steps .cu-item:first-child::after {
    display: none;
}

.cu-steps .cu-item .num {
    width: 40*1upx;
    height: 40*1upx;
    border-radius: 50%;
    line-height: 40*1upx;
    margin: 20*1upx auto;
    font-size: 24*1upx;
    border: 1px solid currentColor;
    position: relative;
    overflow: hidden;
}

.cu-steps .cu-item[class*="text-"] .num {
    background-color: currentColor;
}

.cu-steps .cu-item .num::before,
.cu-steps .cu-item .num::after {
    content: attr(data-index);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    transition: all 0.3s ease-in-out 0s;
    transform: translateY(0*1upx);
}

.cu-steps .cu-item[class*="text-"] .num::before {
    transform: translateY(-40*1upx);
    color: #ffffff;
}

.cu-steps .cu-item .num::after {
    transform: translateY(40*1upx);
    color: #ffffff;
    transition: all 0.3s ease-in-out 0s;
}

.cu-steps .cu-item[class*="text-"] .num::after {
    content: "\e645";
    font-family: 'cuIcon';
    color: #ffffff;
    transform: translateY(0*1upx);
}

.cu-steps .cu-item[class*="text-"] .num.err::after {
    content: "\e646";
}
